<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:1200rpx;"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	let gPaint = new facecat.FCPaint();
	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				const canvas = document.querySelector('#myCanvas');
				gPaint.isMobile = facecat.isMobileMode();
				uni.createSelectorQuery().in(this).select(".facecat").boundingClientRect(data=>
				{
					this.widthEle = data.width;
					this.heightEle = data.height;
				}).exec(); 
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="UTF-8"?>
				<html xmlns="facecat">
					  <head>
					</head>
					<body>
						<div dock="fill">
							<input type="button" name="Button" text="Button" cornerradius="10" size="50%,50%" location="25%,25%" backcolor="rgb(219,68,83)" />
						</div>
					</body>
				</html>`;
				facecat.renderFaceCat(gPaint, xml);
		},
		methods: {  
		}
	}
</script>

<style>
</style>
